<template>
    <div>
        <div class="meta">
            专业:
            <el-select v-model="newTeacherSpecialty" placeholder="请选择专业">
                <el-option v-for="(item, index) in dataList" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
            <!-- <span>说明：姓名为字符少于等于1将被忽略, 密码为空设置默认密码123456</span> -->
         </div>
        <div class="table-wrap">
              <table class="table">
                <thead>
                    <th></th>
                    <th>教师号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                </thead>
                <tbody>
                    <tr v-for="i in tableRowLength" :key="i">
                            <td>{{i}}</td>
                            <td><input type="number" v-model="data[i - 1][0]"></input></td>
                            <td><input type="text" v-model="data[i - 1][1]"></input></td>
                            <td style="min-width: 110px;">
                                <el-switch
                                    v-model="data[i - 1][2]"
                                    active-color="#539fed"
                                    inactive-color="#44f492"
                                    active-text="男"
                                    inactive-text="女"
                                    active-value="男"
                                    inactive-value="女">
                                </el-switch>
                            </td>
                            <td><input type="text" v-model="data[i - 1][3]"></input></td>
                    </tr>
                </tbody>
                <el-button class="add-row-btn" @click="tableRowLength++" icon="el-icon-plus" title="新增行"></el-button>
            </table>
        </div>
        <div style="text-align: right; padding: 10px 10px; 0">
            <el-button type="primary" @click="submit">提交</el-button>
        </div>
        
    </div>
</template>

<script>
export default {
    data () {
       return {
        // ------ 新增教师
        tableRowLength: 10,
        newTeacherSpecialty: '', 
        dataList: [],
		data: [],
		defaultPassword: '123456',	// 密码
		defaultSex: '男' 
       }
    },
    watch: {
        tableRowLength () {
            this.initNewStudentList()
		}
    },
    created() {
        this.$http('/api/specialty/list').then(({data}) => {
            // console.log('data=====>', data)
            this.dataList = data.data;
        })
        this.initNewStudentList()
        if (this.dataList[0]) this.newTeacherSpecialty = this.dataList[0].id
        
    },
    methods: {
        // 初始化教师数据
		initNewStudentList () {
			for (let i = 0; i < this.tableRowLength; i++) {
				if (!this.data[i])
					this.data.push(['', '', this.defaultSex, this.defaultPassword])
			}
			console.log('this.data', this.data)
		},
		// 清空新增教师数据的姓名
		clearNewStudentList () {
            this.data = []  // 解决内容更新视图没有更新
			for (let i = 0; i < this.tableRowLength; i++) {
				this.data[i] = ['', '', this.defaultSex, this.defaultPassword]
			}
		},
        // 保存教师
		submit () {
			console.log('this.data', this.data)
			let data = []
			let len = this.data.length;
			let specialty = this.newTeacherSpecialty
            // console.log('this.data', this.data)
            if (!specialty) {
                this.$message('请选择班级')
                return;
            }
			for (let i = 0; i < len; i ++) {
                
				if (this.data[i][1].length > 1) {	//姓名不能小于两个个字
					if (this.data[i][3].length >= 6) {	// 密码不小于 6 位
							this.data[i][4] = specialty
							data.push(this.data[i])
					} else {
						this.$message(`第 ${i + 1} 行的密码不能少于6字个符`)
					}
				} else if (this.data[i][0].length === 1) {
						this.$message(`第 ${i + 1} 行的姓名不能少于两个字符`)
						return;
				} 
			}
            if (data.length < 1) {
                this.$message('请输入教师')
                return;
            }
			this.$http.post('/api/teacher/add', data).then(({data}) => {
				this.$message({message:  data.msg,type: 'success'})
				this.clearNewStudentList()
			}).catch(err => {
                this.$message.error('添加教师失败，请重试')
            })
		},
    },
}
</script>

<style lang="scss" scoped>
.meta {
    padding-bottom: 10px;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    > span {
        color: #999;
        padding-left: 5px;
        font-size: 80%;
    }
}
.table-wrap {
    max-height: 400px;
    overflow: auto;
    .table {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        position: relative;
        .add-row-btn {
            position: absolute;
            height: 30px;
            right: 0;
            bottom: 1px;
        }
        tr {
            border: 1px solid #ccc;
        }
        th,
        tr>td:first-child {
            background: #eee;
            padding: 0 2px;
        }
        tr>td:nth-child(4) {
            // padding: 0 5%;
            text-align: center;
        }
        th, td {
            height: 30px;
            line-height: 30px;
            border-right: 1px solid #ccc;
            border: 1px solid #ccc;
            text-align: center;
        }
        th span {
            padding-left: 10px;
            font-size: 50%;
            color: #999;
        }
        td input {
            display: block;
            height: 100%;
            width: 100%;
            border: none;
            text-align: center;
            color: #666;
        }
    } 
}
 
</style>